<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.active {
			color: red;
		}
	</style>
</head>
<body>
		 <div class="container">
 
        <div class="all">
            全选<div class="checkbox"></div>
        </div>
        <div class="btns">
            <div class="checkbox">1</div>
            <div class="checkbox">2</div>
            <div class="checkbox">3</div>
            <div class="checkbox">4</div>
            <div class="checkbox">5</div>
            <div class="checkbox">6</div>
        </div>
    </div>
    <script type="text/javascript">
	
var all = document.querySelector('.all .checkbox');
var checkboxs = document.querySelectorAll('.btns .checkbox')
var btns = document.querySelector('.btns');


all.addEventListener('click', handlerClickAll);
 
btns.addEventListener('click', handlerClickOne);

function handlerClickOne(e) {
  			checkboxs.forEach(item => {
  				item.classList.remove('active');
  			})
            e = e || event;
            // 返回元素节点
            var target = e.target;
            // 获取元素标签名 注意返回值是大写。
            if (target.nodeName === 'DIV') {
                if (target.getAttribute('class').indexOf('active') === -1) {
                    target.classList.add('active');
                } else {
                    target.classList.remove('active');
                }
            }
        }
       function handlerClickAll() {
            // 我们此时需要一个判断 : 
            // - all里面是否存在 active ; 
            // - 如果存在我们就删除active; 
            // - 如果不存在我们就添加active;
 
            // all.getAttribute("class") : 获取结果是字符串;
            // 用字符串方法indexOf 判断是否存在 active类名; 
            if (all.getAttribute('class').indexOf('active') === -1) {
                // 给all添加active类名;
                all.classList.add('active');
                // 遍历所有的checkbox元素; 
                for (var i = 0; i < checkboxs.length; i++) {
                    // 添加active类名;
                    checkboxs[i].classList.add('active');
                }   
            } else {
                // 删除active类名
                all.classList.remove('active');
                // 遍历所有的checkbox元素; 
                for (var i = 0; i < checkboxs.length; i++) {
                    // 删除active类名
                    checkboxs[i].classList.remove('active');
                }
            }
        }
    </script>
</body>
</html>